<template>
  <div class="right-table-1">
    <dv-border-box-6 class="box">
      <div class="table-name"><img src="./img/icon1.png" /> Heated Words</div>
      <!-- <div>{{ config.data }}</div> -->
      <dv-scroll-ranking-board
        :config="config"
        style="width: 100%; height: 75%"
      />
    </dv-border-box-6>
  </div>
</template>

<script>
export default {
  name: "RightTable1",
  data() {
    return {
      config: {
        data: [],
        index: true,
        rowNum: 6,
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      let mydata = this;
      mydata
        .$axios({
          method: "get",
          url: "http://116.62.228.138:10003/media/twitterWordGet",
        })
        .then((res) => {
          for (var i = 0; i < res.data.data.length; i++) {
            mydata.config.data.push({
              name: res.data.data[i].word,
              value: res.data.data[i].count,
            });
          }
          this.config = { ...this.config };
        });
    },
  },
};
</script>

<style lang="less">
.right-table-1 {
  width: calc(~"50% + 10px");
  height: 100%;
  margin: 0 -5px;

  .border-box-content {
    padding: 20px;
    box-sizing: border-box;
  }

  .table-name {
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 15px;

    img {
      width: 40px;
      height: 40px;
      margin-right: 5px;
    }
  }
  .box {
    width: calc(~"100% - 20px");
  }
  .dv-scroll-board {
    height: calc(~"100% - 60px");
  }
}
</style>
